<template>
  <div style="margin: 0 auto;width: 100%;background-color: #f0f0f0;">
    <el-carousel :interval="5000" arrow="always" height="400px" :arrow="hover" :autoplay="true">
      <el-carousel-item v-for="(item,index) in swiperList" :key="index">
        <!-- <h3>{{ item }}</h3> -->
        <img :src="item" style="height: 100%;width: 100%;"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        swiperList:[
          '../../../../static/Swiperdemo1.jpg',
          '../../../../static/swiperdemo2.jpg',
          '../../../../static/swiperdemo3.jpg',
          '../../../../static/swiperdemo4.jpg'
        ]
      }
    }
  }
</script>

<style scoped="scoped">
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
